<!DOCTYPE>
<html>
<head>
	<meta charset="UTF-8">
	<title>画友</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/paint-friend.css">
</head>
<body>
	<!-- header顶部 -->
	<header class='clearfix'>
		<div class='top_nav clearfix'>
			<div  class='top_nav_con clearfix'>
				<ul class='left_nav'>
					<li><a href="index.html">主站</a></li>
					<li class='onactive'><a href="paint-friend.html">画友</a></li>
					<li><a href="game.html" target='_blank'>游戏中心</a></li>
					<li><a href="video.html">直播</a></li>
					<li><a href="shop.html">周边</a></li>
					<li><a href="###">移动端</a></li>
				</ul>
				
				<ul class='right_nav'>
					<li><a href="###">消息</a></li>
					<li><a href="###">动态</a></li>
					<li><a href="###">收藏夹</a></li>
					<li><a href="###">历史</a></li>
					<li class='tgao_li'>
						<a href="###" class='tgao'>投稿</a>
						<ul class='tgao_info'>
							<li><a href="###"><i class='i1'></i><span>视频投稿</span></a></li>
							<li><a href="###"><i class='i2'></i><span>投稿管理</span></a></li>
							<li><a href="###"><i class='i3'></i><span>创作中心</span></a></li>
						</ul>
					</li>
				</ul>

				<div class="user">
					<a href="###"  class='user_img'></a>
					<div class="info_box" id='infoBox'>
						<div class="user_info">
							<div class="info_top">
								<p class='username'>Tracy_腾</p>
								<p class='userdefaure clearfix'>
									<span class='de_l'>
										<a href="###" title='硬币'><b>34</b></a>
										<a href="###" title='B币'><b>0</b></a>
									</span>
									<span class='de_r'>
										<a href="###" class='e_link'><span class='email'>前去绑定邮箱</span><i class='email_i'><em class='email_em'></em></i></a>
										<a href="###" class='p_link'><span class='phone'>前去绑定手机</span><i><em></em></i></a>
									</span>
								</p>
								<p class='userlevel clearfix'>
									<span class='levelbox clearfix'>
										<i>等级</i>
										<a href="###" id='level_link'>
											<em class='level_num'></em>
											<em class='level_line'></em>
										</a>
									</span>
									<span class='ex'><b>0</b>/1500</span>
									<div class="level_info" id='levelInfo'>
										<h2>作为<strong>LV2</strong>, 你可以：</h2>
										<ul>
											<li>1、发射个性弹幕（彩色、高级）</li>
											<li>2、参与视频互动（评论）</li>
											<li>3、投稿成为偶像 </li>
										</ul>
										<p><a href="###">会员等级相关说明 &gt;</a></p>
										<i><em></em></i>
									</div>
								</p>
							</div>
							<div class="info_mid">
							<ul class='clearfix'>
								<li><a href="###">个人中心</a></li>	
								<li><a href="###">投稿管理</a></li>
								<li><a href="###">B币钱包</a></li>	
								<li><a href="###">直播中心</a></li>
							</ul>
							</div>
						</div>
						<div class="user_out"><a href="###">退出</a></div>
					</div>
				</div>
			</div>
		</div>
	</header>

	<!-- main_con主体内容 -->
	<section class='main_con clearfix'>
		<div class='list clearfix'>
			<div class="list_con clearfix" id='listCon'>
				<div class="frame bigframe" style="top: 0px; left: 0px;"><a href="###"><img src="img/paint-friend/pic01.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 264px;"><a href="###"><img src="img/paint-friend/pic02.jpg"></a></div>
				<div class="frame smallframe" style="top: 130px; left: 264px;"><a href="###"><img src="img/paint-friend/pic03.jpg"></a></div>
				<div class="frame bigframe"  style="top: 0px; left: 396px;"><a href="###"><img src="img/paint-friend/pic04.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 660px;"><a href="###"><img src="img/paint-friend/pic05.jpg"></a></div>
				<div class="frame smallframe" style="top: 132px; left: 660px;"><a href="###"><img src="img/paint-friend/pic06.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 792px;"><a href="###"><img src="img/paint-friend/pic07.jpg"></a></div>
				<div class="frame smallframe" style="top: 132px; left: 792px;"><a href="###"><img src="img/paint-friend/pic08.jpg"></a></div>
				<div class="frame bigframe" style='top: 132px; left: 924px;'><a href="###"><img src="img/paint-friend/pic09.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 924px;"><a href="###"><img src="img/paint-friend/pic10.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 1056px;"><a href="###"><img src="img/paint-friend/pic11.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 1188px;"><a href="###"><img src="img/paint-friend/pic12.jpg"></a></div>
				<div class="frame smallframe" style="top: 132px; left: 1188px;"><a href="###"><img src="img/paint-friend/pic13.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 1188px;"top: 0px; left: 1188px;"><a href="###"><img src="img/paint-friend/pic14.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 0px;"><a href="###"><img src="img/paint-friend/pic14.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 132px"><a href="###"><img src="img/paint-friend/pic15.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 396px;"><a href="###"><img src="img/paint-friend/pic16.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 264px;"><a href="###"><img src="img/paint-friend/pic17.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 528px;;"><a href="###"><img src="img/paint-friend/pic18.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 660px;"><a href="###"><img src="img/paint-friend/pic19.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 792px;"><a href="###"><img src="img/paint-friend/pic20.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 1320px;"><a href="###"><img src="img/paint-friend/pic21.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 1452px;"><a href="###"><img src="img/paint-friend/pic22.jpg"></a></div>
				<div class="frame bigframe" style="top: 132px; left: 1320px;"><a href="###"><img src="img/paint-friend/pic23.jpg"></a></div>
				<div class="frame bigframe" style="top: 0px; left: 1584px;"><a href="###"><img src="img/paint-friend/pic24.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 1848px;"><a href="###"><img src="img/paint-friend/pic25.jpg"></a></div>
				<div class="frame smallframe" style="top: 132px; left: 1848px;"><a href="###"><img src="img/paint-friend/pic26.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 1584px;"><a href="###"><img src="img/paint-friend/pic27.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 1716px;"><a href="###"><img src="img/paint-friend/pic28.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 1848px;"><a href="###"><img src="img/paint-friend/pic29.jpg"></a></div>
				<div class="frame bigframe" style="top: 0px; left: 1980px;"><a href="###"><img src="img/paint-friend/pic30.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 2244px;"><a href="###"><img src="img/paint-friend/pic31.jpg"></a></div>
				<div class="frame smallframe" style="top: 132px; left: 2244px;"><a href="###"><img src="img/paint-friend/pic32.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 1980px;"><a href="###"><img src="img/paint-friend/pic33.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 2112px;"><a href="###"><img src="img/paint-friend/pic34.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 2244px;"><a href="###"><img src="img/paint-friend/pic35.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 2376px;"><a href="###"><img src="img/paint-friend/pic36.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 2508px;"><a href="###"><img src="img/paint-friend/pic37.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 2640px;"><a href="###"><img src="img/paint-friend/pic38.jpg"></a></div>
				<div class="frame smallframe" style="top: 132px; left: 2376px;"><a href="###"><img src="img/paint-friend/pic39.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 2376px;"><a href="###"><img src="img/paint-friend/pic40.jpg"></a></div>
				<div class="frame bigframe" style="top: 132px; left: 2508px;"><a href="###"><img src="img/paint-friend/pic41.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 2772px;"><a href="###"><img src="img/paint-friend/pic42.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 2904px;"><a href="###"><img src="img/paint-friend/pic43.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 3036px;"><a href="###"><img src="img/paint-friend/pic44.jpg"></a></div>
				<div class="frame bigframe" style="top: 132px; left: 2772px;"><a href="###"><img src="img/paint-friend/pic45.jpg"></a></div>
				<div class="frame smallframe" style="top: 132px; left: 3036px;"><a href="###"><img src="img/paint-friend/pic46.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 3036px;"><a href="###"><img src="img/paint-friend/pic47.jpg"></a></div>
				<div class="frame smallframe" style="top: 0px; left: 3168px;"><a href="###"><img src="img/paint-friend/pic48.jpg"></a></div>
				<div class="frame smallframe" style="top: 132px; left: 3168px;"><a href="###"><img src="img/paint-friend/pic49.jpg"></a></div>
				<div class="frame bigframe" style="top: 0px; left: 3300px;"><a href="###"><img src="img/paint-friend/pic50.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 3168px;"><a href="###"><img src="img/paint-friend/pic51.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 3300px;"><a href="###"><img src="img/paint-friend/pic52.jpg"></a></div>
				<div class="frame smallframe" style="top: 264px; left: 3432px;"><a href="###"><img src="img/paint-friend/pic53.jpg"></a></div>
			</div>
			<a href="###" class='btn prevbtn' id='preBtn'>&lt;</a>
			<a href="###" class='btn nextbtn' id='nextBtn'>&gt;</a>
		</div>
		<div class="flow" id='flow_wp'>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/1.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/2.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/3.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/4.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/5.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/6.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/7.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/8.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/9.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/10.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/11.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/12.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/13.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/14.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/15.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/16.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/17.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/18.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/19.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/20.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/21.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/22.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/23.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/24.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/25.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/26.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/27.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/28.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/29.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/30.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/31.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/32.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/33.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/34.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/35.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/36.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/37.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/38.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/39.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/40.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/41.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/42.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/43.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/44.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/45.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/46.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/47.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/48.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/49.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/50.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/51.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/52.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/53.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/54.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/55.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/56.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/57.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/58.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/59.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/60.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/61.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/62.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/63.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/64.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/65.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/66.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/67.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/68.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/69.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/70.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/71.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/72.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/73.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/74.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/75.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/76.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/77.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/78.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/79.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/80.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/81.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/82.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/83.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/84.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/85.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/86.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/87.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/88.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/89.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/90.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/91.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/92.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/93.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/94.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/95.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/96.jpg"></div>
			</div>
			<div class="box">
				<div class="pic"><img src="img/paint-friend/97.jpg"></div>
			</div>
		</div>
	</section>

	<script src='js/jquery-3.1.1.min.js'></script>
	<script src='js/paint-friend.js'></script>
</body>
</html>